<template>
  <div class="post-list">
    <div v-for="(post, index) in displayedPosts" :key="index" class="post-item" @click="goToDetail(post)">
      <!-- 内容区域 -->
      <div class="content">
        <!-- 标题 -->
        <h3 class="title">{{ post.title }}</h3>
        <!-- 内容 -->
        <div class="meta">
          <span class="roast-content">{{ post.content }}</span>
        </div>
        
        <!-- 作者和时间 -->
        <div class="meta">
          <span class="author">{{ post.author_name || '匿名用户' }}</span>
          <span class="time">{{ formatTime(post.created_at) }}</span>
        </div>
        
        <!-- 标签 -->
        <div class="tags">
          <span v-if="post.category" class="tag">{{ post.category }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RoastApi } from '@/utils/api'

export default {
  name: 'RoastlistFour',
  data() {
    return {
      posts: [],
      
    }
  },
  computed: {
    displayedPosts() {
      // 只显示前4条数据
      return this.posts.slice(0, 4);
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      try {
        const params = {
          skip: 0,
          limit: 4
        }
        
        const response = await RoastApi.getRoastList(params)
        // 根据实际返回结构调整
        if (Array.isArray(response)) {
          this.posts = response
        } else if (response.data) {
          this.posts = response.data.items || response.data
        } else {
          this.posts = response.items || response
        }
      } catch (error) {
        console.error('获取吐槽列表失败:', error)
      }
    },
    
    goToDetail(post) {
      // 将数据传递到详情页
      this.$router.push({
        name: 'RoastDetail',
        params: { id: post.id },
        query: {
          flarum_url: post.flarum_url
        }
      })
    },
    
    formatTime(timeString) {
      if (!timeString) return '未知时间'
      
      const date = new Date(timeString)
      const now = new Date()
      const diff = now - date
      
      const minutes = Math.floor(diff / (1000 * 60))
      if (minutes < 60) {
        return `发布于 ${minutes} 分钟前`
      }
      
      const hours = Math.floor(diff / (1000 * 60 * 60))
      if (hours < 24) {
        return `发布于 ${hours} 小时前`
      }
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      return `发布于 ${days} 天前`
    }
  }
}
</script>

<style scoped>
.post-list {
  padding: 20px;
  background-color: #fff;
}

.post-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  flex: 1;
}

.title {
  font-size: 16px;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.meta {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
  color: #666;
}

.roast-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.author {
  margin-right: 8px;
}

.tags {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .avatar {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>